<template>
  <q-card bordered>
    <q-stepper alternative-labels v-model='status' class='q-pa-md' style='padding-bottom: 0'>
      <q-step :name='0' prefix='1' title='待发货' :done='status > 0' />
      <q-step :name='0' prefix='2' title='运输中' :done='status > 1' />
      <q-step :name='0' prefix='3' title='待收货' :done='status > 2' />
      <q-step :name='0' prefix='4' title='已完成' :done='status > 3' />
      <template #message>
        <div class='q-pa-md'>
          <span v-if='status > 0'>{{ step1 }}</span>
          <span v-if='status > 1'><br />{{ step2 }}</span>
          <span v-if='status > 2'><br />{{ step3 }}</span>
          <span v-if='status > 3'><br />{{ step4 }}</span>
        </div>
      </template>
    </q-stepper>
  </q-card>
</template>

<script lang='ts'>
import { defineComponent, PropType } from 'vue';
import { OrderDetail } from 'app/typings';


export default defineComponent({
  name: 'OrderStatus',
  props: {
    order: {
      type: Object as PropType<OrderDetail>,
      required: true
    }
  },
  setup(props) {
    const status = props.order.status + 1;

    const step1 = `【待发货】于北京时间 ${props.order.commitTime} 提交订单，等候车辆分配`;

    const step2 = function() {
      let str = '【运输中】';
      if (props.order.sendTime) {
        str += `于北京时间 ${props.order.sendTime} 开始运送，
        车辆编号：${props.order.carId}，
        司机编号：${props.order.driverId}`;
      }
      return str;
    }();

    const step3 = function() {
      let str = '【待收货】';
      if (props.order.arriveTime) {
        str += `于北京时间 ${props.order.arriveTime} 到达收货地址，等待收货人签收`;
      }
      return str;
    }();

    const step4 = function() {
      let str = '【已完成】';
      if (props.order.receiveTime) {
        str += `于北京时间 ${props.order.receiveTime} 签收成功`;
      }
      return str;
    }();


    return {
      status,
      step1,
      step2,
      step3,
      step4
    };
  }
});
</script>
<style scoped>
q-item {
  width: 33.33%;
}

q-stepper {
  padding-bottom: 0;
}
</style>
